<!DOCTYPE html>
<html>
    
    <head>
        <meta charset="utf-8">
        <title>
            X-admin v1.0
        </title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="format-detection" content="telephone=no">
        <link rel="stylesheet" href="/static/css/x-admin.css" media="all">
        <link rel="stylesheet" href="/static/css/uploadStyle.css" media="all">
    </head>
    
    <body>
        <div class="x-body">

            <form class="layui-form">
                <div class="base">
                    <div id="goods_picture_box" class="controls" style="background-color:#FFF;border: 1px solid #E9E9E9;">
                        <div class="ncsc-goods-default-pic">
                            <div class="goodspic-uplaod" style="padding: 15px;">
                                <div class='img-box' style="min-height:160px;">
                                    <div class="upload-thumb" id="default_uploadimg">
                                        <img src="/static/image/default_goods_image_240.gif">
                                    </div>
                                </div>
                                <div class="clear"></div>
                                <span class="img-error">最少需要一张图片作为商品主图</span>
                                <p class="hint">上传多张图片，<font color="red">支持同时上传多张图片,多张图片之间可随意调整位置</font>；支持jpg、gif、png格式上传或从图片空间中选择，建议使用尺寸800x800像素以上、大小不超过1M的正方形图片，上传后的图片将会自动保存在uploads文件夹中。
                                </p>
                                <div class="handle">
                                    <div class="ncsc-upload-btn">
                                        <a href="javascript:void(0);">
                                            <span>
                                                <input style="cursor:pointer;font-size:0;" type="file" id="fileupload" hidefocus="true" class="input-file" name="file_upload" multiple="multiple"/>
                                            </span>
                                            <p>图片上传</p>
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <input type="hidden" id="album_id" value="1"/>

                <div class="layui-form-item">
                    <label for="link" class="layui-form-label">
                        <span class="x-red">*</span>链接
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="link" name="link" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="desc" class="layui-form-label">
                        <span class="x-red">*</span>描述
                    </label>
                    <div class="layui-input-inline">
                        <input type="text" id="desc" name="desc" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux">
                        <span class="x-red">*</span>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label">
                    </label>
                    <button  class="layui-btn" lay-filter="add" lay-submit="">
                        增加
                    </button>
                </div>
            </form>


        </div>
        <script src="/static/lib/layui/layui.js" charset="utf-8"></script>
        <script src="/static/js/x-layui.js" charset="utf-8"></script>
        <script src="/static/js/jquery-1.8.1.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="/static/js/drag-arrange.js" charset="utf-8"></script>
        <script src="/static/js/ajax_file_upload.js" type="text/javascript" charset="utf-8"></script>
        <script src="/static/js/jquery.ui.widget.js" charset="utf-8"></script>
        <script src="/static/js/jquery.fileupload.js" charset="utf-8"></script>

        <script type="text/javascript">

            var dataAlbum;
            var UPLOADGOODS = 'UPLOAD_GOODS';//存放商品图片
            $(function () {
                //给图片更换位置事件
                $('.draggable-element').arrangeable();

                var album_id = $("#album_id").val();
                dataAlbum = {
                    "album_id": album_id,
                    "type": "1,2,3,4",
                    'file_path': UPLOADGOODS
                };
                // ajax 上传图片
                var upload_num = 0; // 上传图片成功数量
                $('#fileupload').fileupload({
                    url: "<{:Url('admin/Common/upload')}>",
                    dataType: 'json',
                    //formData:dataAlbum,
                    add: function (e, data) {
                        $("#goods_picture_box .img-error").hide();
                        $("#goods_picture_box #default_uploadimg").remove();
                        //显示上传图片框
                        var html = "";
                        $.each(data.files, function (index, file) {
                            html += '<div class="upload-thumb draggable-element"  nstype="' + file.name + '">';
                            html += '<img nstype="goods_image" src="/static/image/uoload_ing.gif">';
                            html += '<input type="hidden"  class="upload_img_id" nstype="goods_image" value="">';
                            html += '<div class="black-bg hide">';
                            html += '<div class="off-box">&times;</div>';
                            html += '</div>';
                            html += '</div>';
                        });
                        $(html).appendTo('#goods_picture_box .img-box');
                        //模块可拖动事件
                        $('#goods_picture_box .draggable-element').arrangeable();
                        data.submit();
                    },
                    done: function (e, data) {
                        var param = data.result;
                        $this = $('#goods_picture_box div[nstype="' + param.origin_file_name + '"]');
                        if (param.state > 0) {
                            $this.removeAttr("nstype");
                            $this.children("img").attr("src", param.file_name);
                            $this.children("input[type='hidden']").val(param.file_id);
                        } else {
                            $this.remove();
                            if ($("#goods_picture_box .img-box .upload-thumb").length == 0) {
                                var img_html = '<div class="upload-thumb" id="default_uploadimg">';
                                img_html += '<img src="'+ param.file_name +'">';
                                img_html += '</div>';
                                $("#goods_picture_box .img-box").append(img_html);
                            }
                            $("#goods_picture_box .img-error").html("请检查您的上传参数配置或上传的文件是否有误").show();
                        }
                    }
                })

                //图片幕布出现
                $(".draggable-element").live('mouseenter', function () {
                    $(this).children(".black-bg").show();
                });
                //图片幕布消失
                $(".draggable-element").live('mouseleave', function () {
                    $(this).children(".black-bg").hide();
                });

                //删除页面图片元素
                $(".off-box").live('click', function () {
                    if ($(".img-box .upload-thumb").length == 1) {
                        var html = "";
                        html += '<div class="upload-thumb" id="default_uploadimg">';
                        html += '<img nstype="goods_image" src="/static/image/default_goods_image_240.gif">';
                        html += '<input type="hidden" name="image_path" id="image_path" nstype="goods_image" value="">';
                        html += '</div>';
                        $(html).appendTo('.img-box');
                    }
                    $(this).parent().parent().remove();
                });


            });
            //备用
            function img_upload() {

            }
            //图片上传方法
            //此方法备用，后续在使用中需要进行相应的修改，不能直接使用。
            //有的一个页面有可能有两个上传图片地方，所以添加此方法。届时在
            //<input style="cursor:pointer;font-size:0;" type="file" id="fileupload" hidefocus="true" class="input-file" name="file_upload" multiple="multiple"/>
            //增加一个onclick事件就可以了：onclick="file_upload(this);"
            function file_upload(obj) {
                var spec_id = $(obj).attr("spec_id");
                var spec_value_id = $(obj).attr("spec_value_id");
                $('.sku-draggable-element' + spec_id + '-' + spec_value_id).arrangeable();
                $(obj).fileupload({
                    url: "upload.php",
                    dataType: 'json',
                    formData: dataAlbum,
                    add: function (e, data) {
                        var box_obj = $(this).parent().parent().parent().parent().parent().parent().parent().parent();
                        var spec_id = box_obj.attr("spec_id");
                        var spec_value_id = box_obj.attr("spec_value_id");
                        box_obj.find(".img-error").hide();
                        box_obj.find("#sku_default_uploadimg").remove();
                        //显示上传图片框
                        var html = "";
                        $.each(data.files, function (index, file) {
                            html += '<div class="upload-thumb sku-draggable-element' + spec_id + '-' + spec_value_id + ' sku-draggable-element"  nstype="' + file.name + '">';
                            html += '<img nstype="goods_image" src="/static/image/uoload_ing.gif">';
                            html += '<input type="hidden"  class="sku_upload_img_id" nstype="goods_image" spec_id="" spec_value_id="" value="">';
                            html += '<div class="black-bg hide">';
                            html += '<div class="sku-off-box">&times;</div>';
                            html += '</div>';
                            html += '</div>';
                        });

                        box_obj.find('.sku-img-box').append(html);
                        //模块可拖动事件
                        $('.sku-draggable-element' + spec_id + '-' + spec_value_id).arrangeable();
                        data.submit();
                    },
                    done: function (e, data) {

                        console.log(data);


                        var box_obj = $(this).parent().parent().parent().parent().parent().parent().parent().parent();
                        var spec_id = box_obj.attr("spec_id");
                        var spec_value_id = box_obj.attr("spec_value_id");
                        var param = data.result;
                        $this = box_obj.find('div[nstype="' + param.origin_file_name + '"]');
                        if (param.state > 0) {
                            $this.removeAttr("nstype");
                            $this.children("img").attr("src", __IMG(param.file_name));
                            $this.children("input[type='hidden']").val(param.file_id);
                            $this.children("input[type='hidden']").attr("spec_id", spec_id);
                            $this.children("input[type='hidden']").attr("spec_value_id", spec_value_id);
                            //将上传的规格图片记录
                            for (var i = 0; i < $sku_goods_picture.length; i++) {
                                if ($sku_goods_picture[i].spec_id == spec_id && $sku_goods_picture[i].spec_value_id == spec_value_id) {
                                    $sku_goods_picture[i]["sku_picture_query"].push({
                                        "pic_id": param.file_id,
                                        "pic_cover_mid": param.file_name
                                    });
                                }
                            }
                        } else {
                            $this.remove();
                            if (box_obj.find(".upload-thumb").length == 0) {
                                var img_html = '<div class="upload-thumb" id="default_uploadimg">';
                                img_html += '<img src="/static/image/default_goods_image_240.gif">';
                                img_html += '</div>';
                                box_obj.find(".sku-img-box").append(img_html);
                            }
                            box_obj.find(".img-error").html("请检查您的上传参数配置或上传的文件是否有误").show();
                        }
                    }
                })
            }
        </script>

        <script>
            layui.use(['form','layer','upload'], function(){
              //   $ = layui.jquery;
              // var form = layui.form()
              // ,layer = layui.layer;
              //
              //
              // //图片上传接口
              // layui.upload({
              //   url: './upload.json' //上传接口
              //   ,success: function(res){ //上传成功后的回调
              //       console.log(res);
              //     $('#LAY_demo_upload').attr('src',res.url);
              //   }
              // });
              //
              //
              // //监听提交
              // form.on('submit(add)', function(data){
              //   console.log(data);
              //   //发异步，把数据提交给php
              //   layer.alert("增加成功", {icon: 6},function () {
              //       // 获得frame索引
              //       var index = parent.layer.getFrameIndex(window.name);
              //       //关闭当前frame
              //       parent.layer.close(index);
              //   });
              //   return false;
              // });
              
            });
        </script>
        <script>
        var _hmt = _hmt || [];
        (function() {
          var hm = document.createElement("script");
          hm.src = "https://hm.baidu.com/hm.js?b393d153aeb26b46e9431fabaf0f6190";
          var s = document.getElementsByTagName("script")[0]; 
          s.parentNode.insertBefore(hm, s);
        })();
        </script>
    </body>

</html>